<!DOCTYPE html>

<html>
  <head>
    <title>圆的放大</title>

    <style>
      .container {
        margin: 0 auto;

        width: 300px;

        height: 300px;

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

        background: #800080;

        border: 4px solid rgba(255, 0, 0, 0.9);

        border-radius: 10%;
      }

      .circle {
        width: 150px;

        height: 150px;

        background: #ffffff88;

        border-radius: 50%;
        opacity: 0;

        animation: anim 1s ease-out infinite;
      }

      @keyframes anim {
        0% {
          transform: scale(0);
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        100% {
          transform: scale(1);
          opacity: 0;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="circle"></div>
    </div>
  </body>
</html>
